<script setup lang="ts" name="app">
import { auth } from './api'
import { useRequest, useWatcher } from 'alova'
import { partial } from 'radash'

import { useCaptcha, usePagination, useRetriableRequest } from '@alova/scene-vue'

const {
    // 发送状态
    loading: sending,
    countdown,
    // 调用sendCaptcha才会请求接口发送验证码
    send: sendCaptcha
} = useCaptcha(() => auth.pswLogin({ mobPhone: '18571712071', password: '123' }))
</script>

<template>
    <div class="bg-green-500 rounded-lg fc-center space-y-2">
        <Button severity="warning" v-ripple @click="sendCaptcha"> 点击 </Button>
        <b>{{ sending ? '发送中' : '未发送' }}</b>
        <span class="f-center">剩余{{ countdown }}s</span>
    </div>

    <div
        class="bg-orange-400 flex flex-wrap justify-start max-w-140 border border-solid border-white content-start"
    >
        <div
            v-for="num in 10"
            :key="num"
            class="whitespace-nowrap odd:(bg-white text-black) even:(bg-purple-400) last:(mr-auto self-end) mr-2.5 mb-2.5"
        >
            {{ '可以可以' }}
        </div>
    </div>
</template>

<style scoped></style>
